<template>
    <div>
        <el-row>
            <el-col :span="12">
                <el-button class="addBut" type="primary" plain size="small" @click="toFormHandler">增加</el-button>
            </el-col>
            
        </el-row>
        <div class="container" style="text-align:center">
            <el-table
            :data="baseConfigDate"
            style="width: 100%"
            :row-class-name="tableRowClassName"
            align="center">
                <el-table-column
                prop="id"
                label="ID"
                width="180">
                </el-table-column>
                <el-table-column
                prop="name"
                label="姓名"
                width="180">
                </el-table-column>
                <el-table-column
                prop="val"
                label="值"
                width="180">
                </el-table-column>
                <el-table-column
                prop="introduce"
                label="介绍">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                        class="butUpdate"
                        size="small"
                        @click="handleEdit(scope.$index, scope.row)">更新</el-button>
                        <el-button
                        size="small"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        
    </div>
</template>

<script>
import {get,post,del} from "@/utils/request"
export default {
    data () {
        return {
            baseConfigDate:[]
        }
    },
    methods: {
        // 删除表格
        handleDelete(index,row){
            let url="http://localhost:8888/baseconfig/deleteById";
            // 1`点击删除后先询问用户是否真的删除该数据
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 1`将要删除的行的数据发给后台接口deleteById
                console.log(row.id);
                post(url,{id:row.id}).then(resq=>{
                    if(resq.status=20000){
                         // 2`更新页面数据
                        this.loadBaseConfig()
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }
                })
                
            }).catch(()=>{
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            })
        },
        // 更新表格
        handleEdit(index,row){
            // 1`跳转到基础配置表单界面
            //   将该行的数据传给表单界面
            this.$router.push({
                path:"/zhou/baseConfigFrom",
                query:row
            })
        },
        // 跳转到表单页面
        toFormHandler(){
           
           this.$router.push({path:"/zhou/baseConfigFrom"})
        },
        // 属性来为 Table 中的某一行添加 class
        tableRowClassName({row, rowIndex}) {
            if (rowIndex%2 === 0) {
            return 'warning';
            } else if (rowIndex%2 === 1) {
            return 'success';
            }
            return '';
        },
        //获取数据
        loadBaseConfig(){
            let url="http://localhost:8888/baseconfig/query";
            get(url).then(resq =>{
                //获取数据
                this.baseConfigDate=resq.data;
            })
        }
    },
    created () {
        this.loadBaseConfig();
    }
}
</script>

<style lang="scss">
.addBut{
    margin-left: 20px;
}
.butUpdate{
    background: #2dc888;
    color: #fff;
}
.container{
    display: grid;
    grid-template-columns: 8% 84% 8%;
    // background: #2dc888;
}
.el-table{
    grid-column-start: 2;
    grid-column-end: 3;
}
.el-table .success{
    background: #d0f5f1 !important;
}
.el-table .warning{
    background: #d2eef3 !important;
  }
</style>

